<template>
  <div class="plug-custom-amap" :style="cssVars">
    <div class="map-container" id="container"></div>
    <div class="select-container" v-if="placeSearchAble">
      <input class="pac-input" id="pacInput" ref="pacInput" type="text" placeholder="请输入关键字" />
<!--      <v-btn class="ml-2" small depressed @click="clear">清除</v-btn>-->
    </div>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'

export default {
  name: "PlugCustomAmap",
  props: {
    height: { // 地图高度
      type: String,
      default: '90vh'
    },
    placeSearchAble: { // 地点搜索框
      type: Boolean,
      default: false
    },
    addMarkerAble: { // 允许标记
      type: Boolean,
      default: false
    },
    zoom: { // 地图缩放级别
      type: Number,
      default: 11
    },
    // latitude: { // 纬度
    //   type: Number,
    //   default: 0
    // },
    // longitude: { // 经度
    //   type: Number,
    //   default: 0
    // }
  },

  data() {
    return {
      newMarker: [this.longitude, this.latitude] ,// 新标记点
      latitude:'',
      longitude:''
    }
  },
  computed: {
    cssVars() {
      return {
        '--mapHeight': this.height // 地图高度
      }
    },
    /* 高德地图的key */
    mapKey() {
      return 'b540b2fdf6303fa8189d8abda7373101' // 我的项目中在首次加载时调用接口获取的地图的key，然后存入了vuex，然后在这调用
    }
  },
  created() {
    console.log(this.$route.query)
    if(this.$route.query.latitude){
      this.latitude=this.$route.query.latitude
      this.longitude=this.$route.query.longitude
    }
    // window._AMapSecurityConfig = {
    //   serviceHost: '代理服务器域名或地址/_AMapService'
    // }
  },
  mounted() {
    this.initMap()
  },
  beforeDestroy() {
    this.map.destroy()
    this.map = null
  },
  methods:{
    /* 初始化标记点 */
    initMarker() {
      const marker = new AMap.Marker({
        icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
        position: [this.longitude, this.latitude],
        offset: new AMap.Pixel(-13, -30)
      })
      marker.setMap(this.map) // 将标记点放置到地图实例上
      this.map.setCenter([this.longitude, this.latitude], true) // 设置地图中心点
    },
    /* 初始化左键添加标记事件 */
    initAddMarker() {
      this.map.on('click', (e) => {
        this.map.clearMap() // 清理地图上的标记点
        const longitude = e.lnglat.getLng()
        const latitude = e.lnglat.getLat()
        const marker = new AMap.Marker({
          icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
          position: [longitude, latitude],
          offset: new AMap.Pixel(-13, -30)
        })
        marker.setMap(this.map) // 设置最新的标记点
        this.newMarker = [longitude, latitude] // 将最新标记点保存一下，用于点击确定后，传递给父组件
      })
    },
    /* 搜索框：输入提示后查询 */
    initSearchPlace() {
      const autoOptions = { input: 'pacInput' }
      const autoComplete = new AMap.AutoComplete(autoOptions)
      const placeSearch = new AMap.PlaceSearch({ map: this.map }) // 构造地点查询类
      autoComplete.on("select", function (e) {
        placeSearch.setCity(e.poi.adcode)
        placeSearch.search(e.poi.name)  //关键字查询
      }) // 注册监听，当选中某条记录时会触发
    },
    /* 初始化地图实例 */
    initMap() {
      AMapLoader.load({
        key:this.mapKey,  // 申请好的Web端开发者Key，首次调用 load 时必填
        version:"2.0",  // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins:['AMap.Scale', 'AMap.AutoComplete', 'AMap.PlaceSearch', 'AMap.ToolBar'],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap)=>{
        this.map = new AMap.Map("container",{  //设置地图容器id
          viewMode:"3D",    //是否为3D地图模式
          zoom: this.zoom,           //初始化地图级别
          resizeEnable: true
        })
        const scale = new AMap.Scale()
        const toolBar = new AMap.ToolBar()
        this.map.addControl(scale) // 添加比例尺
        this.map.addControl(toolBar) // 添加简单的缩放按钮

        this.placeSearchAble && this.initSearchPlace() // 如果placeSearchAble为true，则初始化搜索框功能
        this.addMarkerAble && this.initAddMarker() // 如果addMarkerAble为true，则初始化左键添加标记功能
        const initMarkerAble = this.latitude > 0 && this.longitude > 0
        initMarkerAble && this.initMarker() // 如果props中的longitude、latitude属性有值，则初始化标记点
      }).catch(e=>{
        console.log(e)
      })
    },
    /* 点击确认按钮，将标记点的经纬度值传递给父组件 */
    confirm() {
      const longitude = this.newMarker[0]
      const latitude = this.newMarker[1]
      this.$emit('setLongitudeLatitude', { longitude, latitude })
    },
    /* 清除地图上的标记 */
    clear() {
      this.map && this.map.clearMap() // 清空标记
      this.$refs.pacInput.value = '' // 将输入框的关键字清空
      this.newMarker = [0, 0]
    }
  }
}
</script>

<style lang="scss" scoped>
.plug-custom-amap {
  position: relative;
  .map-container {
    padding:0;
    margin: 0;
    width: 100%;
    min-height: var(--mapHeight);
    height:100%;
  }
  .select-container {
    position: absolute;
    top: 5px;
    left: 10px;
    background: #fff none repeat scroll 0 0;
    border: 1px solid #ccc;
    margin: 10px auto;
    padding: 6px;
    font-size: 14px;
    .pac-input {
      border: 1px solid #ccc;
      width: 350px;
      padding-left: 5px;
    }
  }
::v-deep .amap-icon img {
    width: 25px;
    height: 34px;
  }
::v-deep .amap-menu-outer {
    padding-left: 0 !important;
  }
}
</style>

